<template>
  <div v-loading="indexDataloading" class="app-container home">
    <el-card v-if="indexData.type === 'gd'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>授信额度</template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic :value="indexData.amountCreditCommission" :value-style="{ 'color': '#409eff' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #409eff">总额</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.amountCreditCommissionAvailable" :value-style="{ 'color': '#409eff' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #409eff">可用</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.amountCreditCommissionUsed" :value-style="{ 'color': '#e6a23c' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #e6a23c">已用</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card
      v-if="indexData.type === 'admin' || indexData.type === 'gd' || indexData.type === 'sd' || indexData.type === 'cd' || indexData.type === 'mr'"
      v-loading="indexDataloading"
      shadow="never"
      style="margin-top: 20px"
    >
      <template #header>营收信息</template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic :value="indexData.amountIncomeBusiness" :value-style="{ 'color': '#409eff' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #409eff">总营收</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.amountIncomeToday" :value-style="{ 'color': '#e6a23c' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #e6a23c">今日营收</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.amountIncomeMonth" :value-style="{ 'color': '#e6a23c' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #e6a23c">本月营收</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card
      v-if="indexData.type === 'admin' || indexData.type === 'gd' || indexData.type === 'sd' || indexData.type === 'mr'"
      v-loading="indexDataloading"
      shadow="never"
      style="margin-top: 20px"
    >
      <template #header>收益信息</template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic :value="indexData.amountIncomeCommission" :value-style="{ 'color': '#67c23a' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #67c23a">待分配</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.amountCurrent" :value-style="{ 'color': '#67c23a' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #67c23a">可分配</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.amountWithdraw" :value-style="{ 'color': '#f56c6c' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large; color: #f56c6c">已提现</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="indexData.type === 'admin'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>推广信息</template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-statistic :value="indexData.gdTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">国代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="indexData.sdTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">省代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="indexData.mrTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">医代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="indexData.storeTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">诊所数量</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="indexData.type === 'gd'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>推广信息</template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic :value="indexData.sdTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">省代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.mrTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">医代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.storeTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">诊所数量</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="indexData.type === 'sd'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>推广信息</template>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-statistic :value="indexData.mrTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">医代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="12">
          <el-statistic :value="indexData.mrTotalToday">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">今日新增医代</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-statistic :value="indexData.storeTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">诊所数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="12">
          <el-statistic :value="indexData.storeTotalToday">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">今日新增诊所</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="indexData.type === 'cd'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>推广信息</template>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-statistic :value="indexData.mrTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">医代数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="12">
          <el-statistic :value="indexData.mrTotalToday">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">今日新增医代</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-statistic :value="indexData.storeTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">诊所数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="12">
          <el-statistic :value="indexData.storeTotalToday">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">今日新增诊所</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="indexData.type === 'mr'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>推广信息</template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic :value="indexData.storeTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center">诊所数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.balanceUsed">
            <template #title>
              <div style="display: inline-flex; align-items: center">消耗次数</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic :value="indexData.balanceUsedToday">
            <template #title>
              <div style="display: inline-flex; align-items: center">今日消耗</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="indexData.type === 'cd'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>消耗信息</template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-statistic :value="indexData.storeTotal">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">诊所数量</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="indexData.balanceCurrent">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">可用次数</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="indexData.balanceUsed">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">消耗次数</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="indexData.balanceUsedToday">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">今日消耗</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="indexData.type === 'mr'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <el-row :gutter="20" justify="center">
        <el-col :span="24">
          <el-button v-hasPermi="['business:store:add']" type="primary" plain icon="Avatar" size="large" @click="handleAdd">快速开户</el-button>
          &nbsp;&nbsp;
          <router-link to="/store">
            <el-button v-hasPermi="['business:store:list']" type="success" plain icon="Operation" size="large">诊所管理</el-button>
          </router-link>
        </el-col>
      </el-row>
    </el-card>

    <el-card v-if="indexData.type === 'store'" v-loading="indexDataloading" shadow="never" style="margin-top: 20px">
      <template #header>使用信息</template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-statistic v-loading="indexDataloading" :value="indexData.balanceTotal" :value-style="{ 'color': '#409eff' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">总次数</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic v-loading="indexDataloading" :value="indexData.balanceCurrent" :value-style="{ 'color': '#67c23a' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">可用次数</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic v-loading="indexDataloading" :value="indexData.balanceUsed" :value-style="{ 'color': '#e6a23c' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">已用次数</div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic v-loading="indexDataloading" :value="indexData.balanceUsedToday" :value-style="{ 'color': '#e6a23c' }">
            <template #title>
              <div style="display: inline-flex; align-items: center; font-size: large">今日使用</div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>

    <el-card
      v-if="indexData.type === 'mr' && Object.keys(changeBalanceStoreStatOption).length > 0"
      v-loading="indexDataloading"
      shadow="never"
      style="margin-top: 20px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <div :style="{ height: '480px' }">
            <Echarts :option="changeBalanceStoreStatOption" />
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card
      v-if="indexData.type === 'store' && Object.keys(changeBalanceDateStatOption).length > 0"
      v-loading="indexDataloading"
      shadow="never"
      style="margin-top: 20px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <div :style="{ height: '480px' }">
            <Echarts :option="changeBalanceDateStatOption" />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 快捷添加诊所对话框 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="680px" append-to-body>
      <el-form ref="storeFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="诊所名称" prop="storeName">
          <el-input v-model="form.storeName" placeholder="请输入诊所名称" />
        </el-form-item>
        <el-form-item v-if="!form.id" label="登录账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入登录账号" maxlength="30" />
        </el-form-item>
        <el-form-item v-if="!form.id" label="登录密码" prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入登录密码" maxlength="20" />
        </el-form-item>
        <el-form-item label="联系电话" prop="storePhonenumber">
          <el-input v-model="form.storePhonenumber" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          <image-upload v-model="form.businessLicense" :limit="1" />
        </el-form-item>
        <el-form-item label="身份证" prop="identityCard">
          <image-upload v-model="form.identityCard" :limit="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index" lang="ts">
// import Line from '@/views/echartdemo/linedemo.vue';
import Echarts from '@/components/ReEcharts/index.vue';
import { getIndexData } from '@/api/business/dashboard';
import { addStore } from '@/api/business/store';
import { StoreVO, StoreQuery, StoreForm } from '@/api/business/store/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const indexDataloading = ref(true);
const indexData = {
  type: '',
  amountCreditCommission: 0.0,
  amountCreditCommissionAvailable: 0.0,
  amountCreditCommissionUsed: 0.0,
  amountIncomeBusiness: 0,
  amountIncomeCommission: 0,
  amountTotal: 0,
  amountCurrent: 0,
  amountWithdraw: 0,
  amountIncomeToday: 0,
  amountIncomeMonth: 0,
  gdTotal: 0,
  sdTotal: 0,
  mrTotal: 0,
  mrTotalToday: 0,
  storeTotal: 0,
  storeTotalToday: 0,
  balanceTotal: 0,
  balanceCurrent: 0,
  balanceUsed: 0,
  balanceUsedToday: 0
};
const changeBalanceDateStatOption = reactive({});
const changeBalanceStoreStatOption = reactive({});
const handleGetIndexData = async () => {
  indexDataloading.value = true;
  const res = await getIndexData();
  Object.assign(indexData, res.data);
  Object.assign(changeBalanceDateStatOption, res.data.changeBalanceDateStatOption);
  Object.assign(changeBalanceStoreStatOption, res.data.changeBalanceStoreStatOption);
  indexDataloading.value = false;
};

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
const buttonLoading = ref(false);
const queryFormRef = ref<ElFormInstance>();
const storeFormRef = ref<ElFormInstance>();

const initFormData: StoreForm = {
  id: undefined,
  storeName: undefined,
  username: '',
  password: '',
  storePhonenumber: undefined,
  businessLicense: undefined,
  identityCard: undefined,
  level: 1,
  switchMsg: 0,
  status: 0
};

const data = reactive<PageData<StoreForm, StoreQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    storeNumber: undefined,
    storeName: undefined,
    storePhonenumber: undefined,
    params: {}
  },
  rules: {
    storeName: [{ required: true, message: '诊所名称不能为空', trigger: 'blur' }],
    username: [
      { required: true, message: '登录账号不能为空', trigger: 'blur' },
      { min: 2, max: 20, message: '登录账号长度必须介于 2 和 20 之间', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '登录密码不能为空', trigger: 'blur' },
      { min: 5, max: 20, message: '登录密码长度必须介于 5 和 20 之间', trigger: 'blur' }
    ],
    storePhonenumber: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
    businessLicense: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
    identityCard: [{ required: true, message: '身份证不能为空', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  storeFormRef.value?.resetFields();
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加诊所';
};

/** 提交按钮 */
const submitForm = () => {
  storeFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      await addStore(form.value).finally(() => (buttonLoading.value = false));
      proxy?.$modal.msgSuccess('添加成功');
      dialog.visible = false;
      await handleGetIndexData();
    }
  });
};

const goTarget = (url: string) => {
  window.open(url, '__blank');
};

onMounted(() => {
  handleGetIndexData();
});
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>
